<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数据可视化面板</title>
    <!-- 引入 Vuetify 依赖（不用安装，CDN 直接用） -->
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/@mdi/font@7.0.96/css/materialdesignicons.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/vuetify@2.6.14/dist/vuetify.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vuetify@2.6.14/dist/vuetify.min.js"></script>
    <style>
        html, body { height: 100%; overflow-y:auto; }
        #app { 
            height: 100%; 
        }

        .v-card { 
            width: 100%;
            overflow-y: auto; 
        }
        .v-select {
            margin-bottom: 0px !important; 
        }
        .v-card .pa-3 {
            margin-bottom: 6px;
        }
        .v-card .pa-2 {
            overflow-y: auto;
            margin-bottom: 12px;
        }
    </style>
</head>
<body>
    <div id="app">
        <v-app>
            <v-app-bar height="64" color="secondary" dark>
                <v-app-bar-nav-icon @click="toggleDrawer"></v-app-bar-nav-icon>
                <v-toolbar-title>数据可视化面板</v-toolbar-title>
                <v-spacer></v-spacer>
                <v-toolbar-items>
                    <v-btn text>导入</v-btn>
                    <v-btn text>导出</v-btn>
                </v-toolbar-items>
            </v-app-bar>
            <v-navigation-drawer v-model="drawer" app temporary>
                <list>
                    <v-list-item link>数据概览</v-list-item>
                    <v-list-item link>详细报表</v-list-item>
                    <v-list-item link>设置</v-list-item>
                </list>
            </v-navigation-drawer>
            
            <v-container fluid fill-height class="d-flex" pa-0>
                <v-row no-gutters class="fill-height">
                    <v-col cols="12" md="2" height="100%" class="pa-2" style="background-color: #f5f5f5;">
                        <v-card height="100%" class="d-flex flex-column">
                            <v-card-title height="auto" class="elevation-0">{{fileName}}</v-card-title>
                            <v-card height="56vh" class="pa-2 elevation-0">
                                    <v-card height="auto" class="pa-3" color="grey lighten-5" v-for="(chart, i) in charts" :key="i">
                                        <v-select
                                            v-model="selectedX"
                                            label="X轴"
                                            :items="Xgroups"
                                            outlined
                                            :menu-props="{ offsetY: true, attach: true, maxHeight: 400 }"
                                        ></v-select>
                                        <v-select
                                            v-model="selectedY"
                                            label="Y轴"
                                            :items="Ygroups"
                                            outlined
                                            multiple
                                            :menu-props="{ offsetY: true, attach: true, maxHeight: 400 }"
                                        ></v-select>
                                    </v-card>  

                            </v-card>
                            <v-btn color="secondary" class="elevation-8" @click="add_chart">添加</v-btn> 
                            
                            <v-list dense>
                                <v-list-item link>数据概览</v-list-item>
                                <v-list-item link>详细报表</v-list-item>
                                <v-list-item link>设置</v-list-item>
                            </v-list>

                        </v-card>
                    </v-col>

                    <v-col cols="12" md="10" height="100%" min-width="" class="pa-2 pl-0 d-flex flex-column fill-height" style="background-color: #f5f5f5;">
                        <v-card class="flex-grow-1">
                            <v-card-title>数据看板</v-card-title>
                            <v-card-text>这里放图表、表格等数据内容（直接用 Vuetify 组件或 ECharts 即可）
                            </v-card-text>
                        </v-card>
                    </v-col>
                </v-row>
            </v-container>


        </v-app>
    </div>
    <script>
        const get_time = () => {
            const now = new Date();
            return now.getFullYear() + String(now.getMonth() + 1).padStart(2, '0') + String(now.getDate()).padStart(2, '0') + String(now.getHours()).padStart(2, '0') + ':' + String(now.getMinutes()).padStart(2, '0') + ':' + String(now.getSeconds()).padStart(2, '0');
        }
        new Vue({
            el: '#app',
            vuetify: new Vuetify({
                breakpoint: {
                    thresholds: {
                        xs: 340,
                        sm: 640,
                        md: 1200,
                        lg: 1600,
                        xl: 1900
                    },
                    scrollBarWidth: 16,
                    mobileBreakpoint: 'md',
                },
            }),
            data:{
                drawer: false,
                fileName: '示例数据文件.csv',
                Xgroups:[1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
                Ygroups:["time", "value", "count", "size", "weight", "price", "temperature", "humidity", "pressure", "speed"],
                selectedX: "",
                selectedY: [],
                charts: [ {1:'一号'}, {2:'二号'} ]  // 示例中有两个图表
            },
            methods: {
                toggleDrawer() {
                    this.drawer = !this.drawer;
                },
                add_chart() {
                    const id=get_time();
                    this.charts.push({[id]: '新图表'});
                    console.log(this.charts);
                }
            },
        })
  </script>
</body>
</html>